---
title: Установка Astro с помощью CLI
description: 'Как установить Astro с помощью NPM, PNPM или Yarn через инструмент create-astro CLI.'
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


Готовы установить Astro? Следуйте этому руководству по использованию `create astro` CLI для начала работы.

:::note[Предпочитаете устанавливать Astro вручную?]
Вместо этого прочитайте наше [пошаговое руководство по установке](/ru/install/manual/).
:::

#### Необходимые условия

- **Node.js** — `v18.14.1` или выше.
- **Текстовый редактор** — мы рекомендуем [VS Code](https://code.visualstudio.com/) с нашим [официальным расширением Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Терминал** — доступ к Astro осуществляется через интерфейс командной строки (CLI).

#### Установка

`create astro` — это самый быстрый способ начать новый проект Astro с нуля. Он проведет вас через все этапы создания нового проекта Astro. Он позволяет вам выбрать один из нескольких официальных шаблонов, или вы можете [использовать любой существующий проект на GitHub с аргументом `--template`](#стартовые-шаблоны).

:::tip[Онлайн предпросмотр]
Предпочитаете попробовать Astro в браузере? Посетите [astro.new](https://astro.new/), чтобы просмотреть наши стартовые шаблоны и запустить новый проект Astro, не выходя из браузера.
:::

## 1. Запустите мастер настройки

Выполните следующую команду в терминале, чтобы запустить наш удобный мастер установки:

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # создайте новый проект с помощью npm
  npm create astro@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # создайте новый проект с помощью pnpm
  pnpm create astro@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # создайте новый проект с помощью yarn
  yarn create astro
  ```
  </Fragment>
</PackageManagerTabs>

Вы можете запустить `create astro` в любом месте на вашей машине, поэтому нет необходимости создавать новую пустую директорию для вашего проекта перед началом работы. Если у вас еще нет пустой директории для нового проекта, мастер поможет создать ее автоматически.

Если все прошло успешно, вы должны увидеть сообщение "Liftoff confirmed. Explore your project!", за которым последуют некоторые рекомендуемые дальнейшие шаги. Перейдите в директорию вашего нового проекта, чтобы начать использовать Astro.

Если вы пропустили шаг `npm install`, во время выполнения `create-astro`, убедитесь что установили зависимости, перед тем как продолжить.

## 2. Запускаем Astro ✨

Astro поставляется со встроенным сервером разработки, на котором есть все необходимое для разработки проекта. Команда `astro dev` запустит локальный сервер разработки, и вы сможете впервые увидеть свой новый сайт в действии.

Каждый стартовый шаблон поставляется с предварительно настроенным скриптом, который запустит `astro dev` для вас. Используйте ваш любимый менеджер пакетов, чтобы запустить эту команду и запустить сервер разработки Astro.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>


Если все пройдет хорошо, Astro будет использовать [http://localhost:4321/](http://localhost:4321/) для вашего проекта!

Astro будет следить за изменениями файлов в вашей директории `src/`, так что, вам не нужно перезапускать сервер после внесения изменений 
во время разработки.

При просмотре сайта в браузере вам будет доступна [панель разработчика Astro](/ru/guides/dev-toolbar/). В процессе создания сайта она поможет вам проверить ваши [острова](/ru/concepts/islands/), выявить проблемы с доступностью и многое другое.

Если вы не можете открыть свой проект в браузере, вернитесь в терминал, где вы выполняли команду `dev`, и посмотрите, не произошла ли ошибка, или не обслуживается ли ваш проект по URL, отличному от того, на который дана ссылка выше.

## Стартовые шаблоны

Вы также можете начать новый проект astro на основе [официального примера](https://github.com/withastro/astro/tree/main/examples) или `main` ветки любого репозитория GitHub, передав аргумент `--template` команде `create astro`.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # создайте новый проект с официальным примером
  npm create astro@latest -- --template <example-name>

  # создайте новый проект на основе основной ветки репозитория GitHub
  npm create astro@latest -- --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # создайте новый проект с официальным примером
  pnpm create astro@latest --template <example-name>
  
  # создайте новый проект на основе основной ветки репозитория GitHub
  pnpm create astro@latest --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # создайте новый проект с официальным примером
  yarn create astro --template <example-name>
  
  # создайте новый проект на основе основной ветки репозитория GitHub
  yarn create astro --template <github-username>/<github-repo>
  ```
  </Fragment>
</PackageManagerTabs>

По умолчанию эта команда будет использовать `main` ветку репозитория шаблона. Чтобы использовать другое имя ветки, передайте его в качестве части аргумента `--template`: `<github-username>/<github-repo>#<branch>`.

Исследуйте [каталог наших тем и стартовых проектов](https://astro.build/themes/), где вы можете найти темы для блогов, портфолио, документации, целевых страниц и многого другого! Или [произведите поиск на GitHub](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories), чтобы найти еще больше стартовых проектов.

## Следующие шаги

Успех! Теперь вы готовы начать создавать с помощью Astro! 🥳

Вот несколько тем, которые мы рекомендуем изучить далее. Вы можете читать их в любом порядке. Вы даже можете оставить нашу документацию на некоторое время и поиграть в кодовой базе вашего нового проекта Astro, возвращаясь сюда всякий раз, когда у вас возникнут проблемы или вопросы.

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

<CardGrid>
  <LinkCard
    title="Разберитесь в своём коде"
    description="Узнайте больше о файловой структуре Astro в нашем руководстве по структуре проекта."
    href="/ru/basics/project-structure/"
  />
  <LinkCard
    title="Добавьте фреймворк"
    description="Расширьте Astro с поддержкой React, Svelte, Tailwind и других фреймворков в нашем руководстве по интеграциям."
    href="/ru/guides/integrations-guide/"
  />
  <LinkCard
    title="Разверните свой сайт"
    description="Узнайте, как создать и развернуть проект Astro в Интернете, из нашего руководства по развертыванию."
    href="/ru/guides/deploy/"
  />
</CardGrid>